<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>SafeSynchrome Options</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript">
        function init() {
            /* beautify the layout */
            var max = 0;
            $('label').each(function() {
                if ($(this).width() > max) {
                    max = $(this).width();
                }
            });
            $('label').width(max);
            
            if (localStorage["ss_login_name"] != null || localStorage["ss_login_name"] != "") {
                $("#login_name").val(localStorage["ss_login_name"]);
                $("#password").val(localStorage["ss_password"]);
            }
        };

        function saveOption() {
            /** TODO:
              * check sessiontoken() and return false if account/password is invalid
              * check urlsforuser() and obtain the value before save
            */
            $("#login_name").removeClass("error");
            $("#password").removeClass("error");
            $("#msg").removeClass("error success").empty();
            
            /* Get the service url */
            $.get(DEFAULT_SERVICE_URL + "hostforuser", {
                "loginName" : $("#login_name").val(),
                "realm" : $("#realm").val(),
                "service" : $("#apikey").val()
            }, function(response) {
                if (response.Status == RESPONSE_STATUS["ERROR"]) {
                    $("#error_msg").text("Login name is invalid!");
                    $("#login_name").addClass("error").focus();
                } else {
                    var service_url = "https://" + response.dc + "/api/v1/";

                    /* Check account availability and store the auth token to cookie */                    
                    $.get(service_url + "sessiontoken", {
                        "loginName" : $("#login_name").val(),
                        "password" : $("#password").val(),
                        "realm" : $("#realm").val(),
                        "service" : $("#apikey").val()
                    }, function (answer) {
                        if (answer.Status == RESPONSE_STATUS["ERROR"]) {
                            $("#msg").text("Wrong password!").addClass("error");
                            $("#password").addClass("error").val("").focus();
                        } else {
                            $("#msg").text("Account saved!").addClass("success");
                            localStorage["ss_login_name"] = $("#login_name").val();
                            localStorage["ss_password"] = $("#password").val();
                            localStorage["ss_realm"] = $("#realm").val();
                            localStorage["ss_apikey"] = $("#apikey").val();
                            localStorage["ss_service_url"] = service_url;
                            chrome.cookies.set({
                                "url" : service_url,
                                "name" : "auth",
                                "value" : answer.sessiontoken,
                                "domain" : ".safesync.com",
                                "path" : "/",
                                "expirationDate" : Math.floor((new Date().getTime() / 1000) + 86400 * 365),
                            });
                            
                            $.get(service_url + "filesroot", {
                                "_auth" : answer.sessiontoken,
                                "absUri" : 1
                            }, function(container) {
                                localStorage["ss_user_home"] = container.node[0].uri;
                                localStorage["ss_user_recyclebin"] = container.node[1].uri;
                            });
                        }
                    });
                }
            });
        }
    </script>
</head>
<body onload="init()">
    <h1>SafeSynchrome Option Setting</h1>
    <div class="option_form">
        <div class="options">
            <label for="name">Login name:</label>
            <input type="text" name="login_name" size="40" id="login_name" />
        </div>
        <div class="options">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" />
        </div>
        <div class="options">
            <label for="realm">Realm:</label>
            <select name="realm" id="realm">
                <option value="safesync" selected>SafeSync</option>
                <option value="idsafe" disabled>Direct Pass</option>
                <option value="jbox" disabled>Jewelry Box</option>
            </select>
        </div>
        <input type="hidden" name="apikey" id="apikey" value="ODA4NGE2MTJkNTlmYjM3ZmU3ZTVhZTA5MzI2YWRjZWQ5MzVhOTA1M2RhY2U5NDBjZDEzMTdkYTFiNzU4ZTRlYQAxLjAAaG93YXJkX2NoZW5nQHRyZW5kLmNvbS50dwAxMzI2MDQ3NDg2ADEAWDA1" />    
        <div id="msg" class="options"></div>
        <div class="options">
            <button onclick="saveOption();">Save</button>
            <button onclick="setTimeout(window.close(), 1000);">Close</button>
        </div>
    </div>
</body>
</html>